import React from 'react';
import {render} from 'react-dom';
import { Router,Route,browserHistory,hashhistory,IndexRoute,IndexLink,Link} from 'react-router';
import AppComponent from './components/Main';
import Header from './components/header';
import Footer from './components/footer';
import MButton from './components/common/MButton';
import MInput from './components/common/MInput';
import MTooltip from './components/common/MTooltip';
import {Scss} from './public/scss/component.scss';
import common from './public/scss/common.scss';
import iconfont from './public/iconfont/iconfont.css';

//Main component
class App extends React.Component{
  render(){
    return (
      <div>
        <Header />
          { this.props.children }
        <Footer />
      </div>        
    )
  }
}

/* 暂时使用 hashhistory 进行开发,因为使用 browserHistory 是服务器渲染，页面刷新时会出现404  */
render((
    <Router history={browserHistory}>  
      <Route path="/" component={App}>
        <IndexRoute component={AppComponent}/>
        <Route path="/about" component={MButton}/>
        <Route path="/work" component={MTooltip}/>
        <Route path="/contact" component={MInput}>
          <Route path="messages" component={MButton} />
        </Route>
        <Route path="*" component={MInput} />
      </Route>
    </Router>
  ),document.getElementById('content'));